<template>
  <el-button type="primary" @click="visible = true" :icon="Edit"/>
  <el-dialog v-model="visible" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form ref="dataFormRef" label-width="120px" :v-model="roomMsgCopy">
      <el-form-item label="房间简介" prop="info">
        <el-input type="textarea" v-model="roomMsgCopy.info"></el-input>
      </el-form-item>
      <el-form-item label="房间公告" prop="notice">
        <el-input type="textarea" v-model="roomMsgCopy.notice"></el-input>
      </el-form-item>
      <el-form-item label="直播间封面" prop="coverId">
        <addFile ref="url" v-model="roomMsgCopy.url"></addFile>
      </el-form-item>
      <el-form-item label="是否禁播" prop="status">
        <el-switch v-model="roomMsgCopy.status" inline-prompt active-text="否" inactive-text="是" size="large"/>
      </el-form-item>
    </el-form>
    <template #footer>
            <span>
                <el-button @click="visible = false" style="margin-right: 10px;">取消</el-button>
                <el-button type="primary" @click="updateRoom">确定</el-button>
            </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {ref, onMounted, inject} from "vue";
import {Edit} from "@element-plus/icons-vue";
import {updateLiveRoom} from "@/service/api";
import addFile from "../../components/addFile.vue";

const props = defineProps({
  roomMsg: Object
})

const roomMsgCopy = ref<any>({})
onMounted(() => {
  roomMsgCopy.value = {...props.roomMsg}
})

const url = ref(roomMsgCopy.value.url)
const visible = ref(false);
const getLiveRoomList = inject<any>('getLiveRoomList')


const updateRoom = async () => {
  try {
    const {id, info, notice} = roomMsgCopy.value;
    let statusValue = 0;
    if (roomMsgCopy.value.status === false) {
      statusValue = 1;
    }
    const res = await updateLiveRoom({id, info, coverId: url.value.coverId, notice, status: statusValue});
    console.log("调用updateRoom成功:", res);
    // 更新成功后的逻辑
    getLiveRoomList()
    visible.value = false; // 关闭对话框
  } catch (error) {
    console.log("更新房间失败" + error);
  }
};


</script>

<style scoped lang="less">
.avatar-uploader {
  :deep(.avatar) {
    width: 178px;
    height: 178px;
    display: block;
  }

  :deep(.el-upload) {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  :deep(.el-upload:hover) {
    border-color: var(--el-color-primary);
  }

  :deep(.el-icon.avatar-uploader-icon) {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
}
</style>
